<!DOCTYPE html>
<html>

    <head>
	
        <title>Drawing App</title>
        
		
		
		<script src="js/libs/jquery/jquery.js"></script>
		<script src="js/libs/jquery/jquery-ui.js"></script>
		<script src="js/libs/jscolor/jscolor.js"></script>
		<script src="include/HTML-KickStart-master/js/kickstart.js"></script>
		
		<script src="js/libs/zip/zip.js"></script>
		<script src="js/libs/zip/deflate.js"></script>
		<script src="js/libs/zip/inflate.js"></script>
		<script src="js/libs/FileSaver/FileSaver.js"></script>
		<script src="js/libs/Blob.js"></script>
		
		<script src="js/Algorithm.js"></script>	
		<script src="js/Timer.js"></script>	
		<script src="js/Color.js"></script>
		
		
		<script src="js/Canvas.js"></script>
		<script src="js/Point2D.js"></script>
		
		<script src="js/Shape.js"></script>	
		<script src="js/GeometricFigures/Line.js"></script>
		<script src="js/GeometricFigures/Circle.js"></script>
		
		<script src="js/Tools/Tool.js"></script>
		<script src="js/Tools/Pen.js"></script>
		<script src="js/Tools/Crayon.js"></script>
		<script src="js/Tools/Eraser.js"></script>
		
		<script src="js/FileHandler.js"></script>
		<script src="js/ShapeManager.js"></script>
		<script src="js/CanvasManager.js"></script>
		<script src="js/Redrawer.js"></script>
		<script src="js/Drawer.js"></script>
		<script src="js/Interface.js"></script>
		<script src="js/Common.js"></script>	
		<script src="js/Action.js"></script>	
		<script src="js/ActionManager.js"></script>	
		<script src="js/Application.js"></script>	
		<script src="js/main.js"></script>	
		
		<link rel="stylesheet" type="text/css" href="include/HTML-KickStart-master/css/kickstart.css" media="all" />
		<link rel="stylesheet" type="text/css" href="include/font-awesome-4.0.3/css/font-awesome.css" media="all" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		
		
		<script>
			zip.workerScriptsPath = "./libs/zip/"; 
			zip.useWebWorkers = false;
		</script>
				
    </head>
	
    <body>
		<div id = "canvases">
			 <canvas id="front_canvas" width="800px" height="600px"> Your web browser isn't supporting javascript please update it !</canvas>
			 <canvas id="back_canvas" width="800px" height="600px"> Your web browser isn't supporting javascript please update it !</canvas>
			 <canvas id="layout_canvas" width="800px" height="600px"> Your web browser isn't supporting javascript please update it !</canvas>
		</div>
		
		<div id = "menu">
			
			<ul class="tabs">
			
				<li class="first current"><a href="#home">Home</a></li>
				
				<li class=""><a href="#file">File</a></li>
				
				<li class="last"><a href="#redrawer">Redrawer</a></li>
				
				<!-- <li class="last"><a href="#settings">Settings</a></li> -->
				
				<li class="last"><a href="#about">About</a></li>
				
				
			</ul>

				<div id = "home" class="tab-content">
				
					<div id = "undoredo">
						<table>
						<tr>
						
							<td>
								<button class="medium" onClick="javascript:App.getActionManager().undo()" > <i class="icon-reply"> </i> </button>
							</td>
							
							<td>
								<button class="medium" onClick="javascript:App.getActionManager().redo()" > <i class="icon-share-alt"> </i> </button>
							</td>
						</tr>
						</table>
					</div>
					<!-- 
						Adding
					-->
					<h6> Tools </h6>
					
					<table>
						<tr>
							<td>
								<button class="medium" onClick="javascript:App.getInterfaces().setTool('Free') ; Application.setFunction(true, false, false, false, false); App.setCurrentWorkingShape(null)"> <i class="fa fa-pencil"> </i> </button>
							</td>
							<td>
								<button class="medium" onClick="javascript:Application.setFunction(false, false, false, false, true);" > <i class="fa fa-eraser"> </i> </button>
							</td>
							<td>
								<button class="medium" onClick="javascript:App.getShapeManager().fuseShapes(App.example)" > <i class="fa fa-compress"> </i> </button>
							</td>
							<td>
								<button class="medium" onClick="javascript:App.getShapeManager().unFuseShapes(App.getCurrentWorkingShape())" > <i class="fa fa-expand"> </i> </button>
							</td>
							<td>
								<button class="medium" onClick="javascript:App.getShapeManager().removeShape(App.getCurrentWorkingShape()); App.getCanvasManager().drawOptimisedCanvas(App.getShapeManager().getData(), App.getCanvasManager().getBackCanvas(), null);App.setCurrentWorkingShape(null)" > <i class="fa fa-trash-o"> </i> </button>
							</td>
						</tr>
						
						<tr>
							<td>
								<button class="medium" onClick="javascript:Application.setFunction(false, true, false, null)" > <i class="fa fa-crosshairs"> </i> </button>
							</td>
							<td>
								<button class="medium" onClick="javascript:Application.setFunction(false, false, true, null)" > <i class="fa fa-crop"> </i> </button>
							</td>
							<td>
								<button class="medium" onClick="javascript:App.getShapeManager().duplicateShape(App.getCurrentWorkingShape())" > <i class="fa fa-files-o"> </i> </button>
							</td>
							<td>
								<button class="medium" onClick="javascript:App.getInterfaces().setTool('Eraser')" > <i class="fa fa-scissors"> </i> </button>
							</td>
							<td>
								<button class="medium" onClick="javascript:App.getShapeManager().fuseShapes(App.example); App.example = [];" > <i class="fa fa-clipboard"> </i> </button>
							</td>
						</tr>

					</table>
					
					<h6> Shapes </h6>
					
					<table>
						<tr>
							<td>
								<button class="medium" onClick="javascript:App.getInterfaces().setTool('Free'); javascript:App.getInterfaces().setShape('Circle'); " > <i class="fa fa-circle-o"> </i> </button>
							</td>
							<td>
								<button class="medium" onClick="javascript:App.getInterfaces().setShape('Line')" > <i class=" icon-magic"> </i> </button>
							</td>
							<td>
								<button class="medium" onClick="javascript:App.getInterfaces().setTool('Eraser')" > <i class=""> </i> </button>
							</td>
						</tr>
						
						<tr>
							<td>
								<button class="medium" onClick="javascript:App.getInterfaces().setTool('Free')" > <i class=" icon-pencil"> </i> </button>
							</td>
							<td>
								<button class="medium" onClick="javascript:App.getInterfaces().setTool('Eraser')" > <i class=" icon-magic"> </i> </button>
							</td>
							<td>
								<button class="medium" onClick="javascript:App.getInterfaces().setTool('Eraser')" > <i class=""> </i> </button>
							</td>
						</tr>

						
					</table>
					
					<h6> Colors </h6>
					Color : <input class="color" id = "colorPicker" value="" onChange="javascript:App.getInterfaces().setColor(this.color.toString())">
					
					<h6> Thickness </h6>
						<table>
							<tr>
								<td><input type="range" id="rangeThickness" min="2" max="14" onchange="showValue(this.value); App.getInterfaces().setThickness(this.value)" /></td>
								<td><span id="range">2</span></td>
							</tr>
						</table>
						
						<script type="text/javascript">
							function showValue(newValue)
							{
								document.getElementById("range").innerHTML=newValue;
							}
						</script>
					
					<h6> Layer</h6>
					
					<!-- <button id="layerButton" class="large" onClick="" > <i class="icon-picture"> </i> </button> -->
					<input type="file" id="loadLayoutButton" name="LOADED" />
					<td> <button id = "loadButton"class="small" onClick="javascript:App.getCanvasManager().loadLayout()" > <i class="icon-file"> </i> </button> </td>
					
				</div>
				
				<div id = "file" class="tab-content">
				
					<h6> Export a drawing </h6>
					<label> Filename : <input id="saveFileName" type="text" value="" float="right" placeholder="filename.bin..."/> </label>
					<button class="small" onClick="javascript:App.saveFile()" > <i class="icon-save"> </i> </button>
					
					<h6> Import a drawing </h6>
					<table>
						<tr>
							<td> <input type="file" id="files" name="LOADED"/> </td>
							<td> <button id = "loadButton"class="small" onClick="javascript:App.loadFile()" > <i class="icon-file"> </i> </button> </td>	
						</tr>
					</table>
					
					<h6> Export Shape </h6>
					<label> Filename : <input id="exportFileName" type="text" value="" float="right" placeholder="filename ..."/> </label>
					<button class="small" onClick="javascript:App.getFileHandler().exportShape(App.getShapeManager().getData()[App.getCurrentWorkingShape()])" > <i class="icon-save"> </i> </button>
					
					<h6> Import Shape </h6>
					<table>
						<tr>
							<td> <input type="file" id="filesToImport" name="LOADED"/> </td>
							<td> <button id = "loadButton"class="small" onClick="javascript:App.getFileHandler().importShape(App.getShapeManager().getData())" > <i class="icon-file"> </i> </button> </td>	
						</tr>
					</table>
					
					<h6> Imported Shapes list </h6>
					
					<div id = "divImportedShapesList">
						<table id = "tableImportedShapesList">
						
							<tr id = "ligneImportedShapesList">
							</tr>
						
						</table>
					</div>
					
					
				</div>
				
				<div id = "about" class="tab-content">
					<p> Drawing app made by Stefan </p>
					
					<p id = "version"> Version : </p>
					
					<p> Warning under construction !</p>
				</div>
				
				<div id = "redrawer" class="tab-content">
					<p> Status : Off </p>
					<table>
						<tr>
							<td><button class="medium" onClick="javascript:App.getCanvasManager().getRedrawer().start(App.getShapeManager().getData(), App.getCanvasManager())" > <i class=" icon-play"> </i> </button></td>
							<td><button class="medium" onClick="javascript:App.getCanvasManager().getRedrawer().pause()" > <i class=" icon-pause"> </i> </button></td>
							<td><button class="medium" onClick="javascript:App.getCanvasManager().getRedrawer().stop()" > <i class=" icon-stop"> </i> </button></td>
						</tr>
					</table>
					
					<h6> Speed </h6>
						<table>
							<tr>
								<td><input type="range" id="rangeSpeed"  min="-10" max="10" value="1" onchange="showValue2(this.value); App.getCanvasManager().getRedrawer().setSpeed(this.value)" /></td>
								<td><span id="range2">1</span></td>
							</tr>
						</table>
						<script type="text/javascript">
							function showValue2(newValue)
							{
								document.getElementById("range2").innerHTML=newValue;
							}
						</script>
				
					
				</div>
				
				<!--<div id = "settings" class="tab-content">
				<p> This is the settings tab ! </p>
				<div id = "draws" >
					<input type="button" onClick="javascript:App.getShapeManager().removeShape(App.getCurrentWorkingShape()); App.getCanvasManager().drawOptimisedCanvas(App.getShapeManager().getData(), App.getCanvasManager().getBackCanvas(), null)" value="Erase Shape" name=erase_shape>
					<input type="button" onClick="javascript:App.getCanvasManager().drawCanvas(App.getShapeManager().getData(), App.getCanvasManager().getBackCanvas())" value="Redraw canvas" name=canv>
					<input type="button" onClick="javascript:App.getCanvasManager().drawOptimisedCanvas(App.getShapeManager().getData(), App.getCanvasManager().getBackCanvas())" value="Redraw canvas(optimised)" name=canv>
					<input type="button" onClick="javascript:drawer.clearCanvas()" value="Clear Canvas" name=canv>
				</div>
				
				<div id = "realdraws" >
				
					<input type="range"  value="0" min="-10" max="10" step="0.5">
					
					<input type="number" name="redrawSpeed" value="0">
					
					<br />
					
					<input type="button" onClick="javascript:App.getCanvasManager().getRedrawer().start(App.getShapeManager().getData(), App.getCanvasManager())" value="Real Time Redraw" name=redraw>
					<input type="button" onClick="javascript:App.getCanvasManager().getRedrawer().pause()" value="Pause redrawing" name=canv>
					<input type="button" onClick="javascript:App.getCanvasManager().getRedrawer().unpause(App.getShapeManager().getData(), App.getCanvasManager())" value="Unpause redrawing" name=canv>
				</div>
				<br />
				<div>
					<input type="button" onClick="javascript:Application.setFunction(true, false)" value="Draw" name=canv>
					<input type="button" onClick="javascript:Application.setFunction(false, true)" value="Select" name=canv>
				</div>
				<br />
				<div id = "color">
				
					Color : <input class="color" value="cb3594" onChange="javascript:App.getInterfaces().setColor(this.color.toString())">
					
					Thickness : <select id = "thickness" name="nom" size="1" onChange="javascript:App.getInterfaces().setThickness(this.value)">
					</select>
				</div>
				<br />
				<div id = "operations">
					<input type="button" onClick="javascript:App.saveFile()" value="Upload a file" name=save>
					<input type="button" onClick="javascript:data_url()" value="DATA URL" name=load>
				</div>
				<div>
					<input type="button" onClick="javascript:App.loadFile()" value="Load a file" name=load>
					<input type="file" id="files" name="LOADED"/>
					
				</div>
				<br />
				<div>

					<input type="button" onClick="javascript:App.getCanvasManager().getRedrawer().setFullSpeed(false)" value="Full speed" name=big>
				</div>
				<br />
				<div id = "tools">
					<input type="button" onClick="javascript:App.getInterfaces().setTool('Free')" value="Pen" name=canv>
					<input type="button" onClick="javascript:App.getInterfaces().setTool('Eraser')" value="Eraser" name=canv>
				</div>
				<div id = "shapes">
					<input type="button" onClick="javascript:App.getInterfaces().setShape('Line')" value="Line" name=canv>
					<input type="button" onClick="javascript:App.getInterfaces().setShape('Circle')" value="Circle" name=cir>
				</div>
				<br />
				<div id ="shape_infos">
						<p id = "shape_number"></p>
						<p id = "shape_thickness"></p> 
						<p id = "shape_color"></p>
				</div>
			
			</div>-->
		
		</div>
		
		
		<script>main();</script>
		
    </body>
</html>